<!-- 本界面是空闲教室流量统计的界面，目前暂时设定的是四种身份的人都可以看到这个界面。
界面首先显示当前的系统时间是（教学周、日期、时间段）
然后在下面的表格中列出当前空闲的所有教室，以及该教室的目前的人数
-->
{#<!DOCTYPE html>#}
<html>

<head>
    {% load static %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>空闲教室流量统计</title>
    <link rel="stylesheet" href="{%static 'layui/css/layui.css'%}">
    <link rel="stylesheet" href="{%static 'css/flow_statistics.css'%}">
</head>

<body>
    <!---头部导航区和左侧导航区 --->
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">智慧教室管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img"> <span id="username"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/user_center/">个人中心</a></dd>
                    <dd><a href="/logout/">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/stureserve/">学生预约</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="/flowStatistics_index/">空闲教室流量统计</a>
                </li>
            </ul>
        </div>
    </div>
    </div>

        <div class="layui-body">

            <div class="basicInfoHeader">
                <p>空闲教室流量统计</p>
            </div>
            <blockquote class="selectBox">
                <div >
                    <p>当前时间是：教学周{{ week }}周、星期{{ day }}、第{{ time }}大节</p>
                </div>
            </blockquote>
            <fieldset class="layui-elem-field">
                <div class="classroomTableBox">
                    <table class="layui-table"  id="flow_list" lay-filter="flowTable"></table>
                </div>
            </fieldset>
        </div>
    </div>

    <script src="{%static 'layui/layui.js'%}"></script>
    <script src="{%static 'jquery/jquery-3.2.1.js'%}"></script>
    <script src="{%static 'layer/layer.js'%}"></script>

    <script>
        //JS
        var building=null,floor=null,room=null,week=null,day=null,time=null,state=null;
        var time_interval =0;//这里用一个数记录刷新的次数，传递给后端，后端读取相应的照片，返回对应的人数。
        layui.use(['element', 'layer', 'util', 'form', 'table'], function () {
            var element = layui.element,
                layer = layui.layer,
                util = layui.util,
                form = layui.form,
                table = layui.table,
                $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作', {
                        icon: 0
                    });
                },
                menuRight: function () {
                    layer.open({
                        type: 1,
                        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                        area: ['260px', '100%'],
                        offset: 'rt' //右上角
                        ,
                        anim: 5,
                        shadeClose: true
                    });
                }
            });

            //教室使用信息表格

            table.render({
                elem: "#flow_list",//赋值表格
                url: '/flowStatistics/',
                id: 'reloadTable',
                loading: false,
                height: 312,
                page: true,
                limit: 50,
                cols: [[
                    {field: "building_id", title: "楼栋ID", hide: true},
                    {field: "cid", title: "教室ID", hide: true},
                    {field: "building_name", title: "楼栋"},
                    {field: "classroom_name", title: "教室"},
                    {field: "flow_num", title: "人流量"},
                ]]
            });

            //事件监听，如果用户搜索教室的话，点击按钮之后立即刷新表格
            var active = {
                reload: function () {
                    timer1 = setTimeout(function () {
                        table.reload('reloadTable', {
                            page: {
                                curr: 1//从第一页开始
                            },
                            where: {}
                        }, 'data');
                        console.log("刷新表格");
                        layer.close(index);
                    }, 5);
                }
            }

            //此处有一个bug,刷新表格会闪现

            timer2 = setInterval(function () {
                console.log("刷新表格");
                time_interval ++; //每隔五分钟，该变量自增并且传给后端

                table.reload('reloadTable', {
                    url: '/flowStatistics/',
                    method: "post",
                    headers: {"X-CSRFToken": "{{ csrf_token }}"},
                    page: true,
                    where: {
                        "time_interval": time_interval
                    },
                    done: function (res, curr, count) {
                        if (!("flag" in res)) alert("未知错误");
                        else if (res["flag"] !== 0) alert(res["flag"]);
                        console.log(res);
                    }
                },'data');
            }, 300000);//每隔五分钟刷新一次表格300000



            //更新表格
        {#function reload_table(building,floor,room) {#}
        {#    table.reload('useInfo_list', {#}
        {#        url: '/flowStatistics/',#}
        {#        method: "post",#}
        {#        headers: {"X-CSRFToken": "{{ csrf_token }}"},#}
        {#        page: true,#}
        {#        where: {#}
        {#            "building": building,#}
        {#            "floor": floor,#}
        {#            "room": room,#}
        {#        },#}
        {#        done: function (res, curr, count) {#}
        {#            if (!("flag" in res)) alert("未知错误");#}
        {#            else if (res["flag"] !== 0) alert(res["flag"]);#}
        {#            console.log(res);#}
        {#        }#}
        {#    })#}
        //}#}
    });
    </script>
<script>
    //判断当前登录的是谁
    $.ajax({
                url: "/user/",
                method: "get",
                success: function (response) {
                    if(response.msg === 'ok'){
                        $("#username").html(response.data.username)
                    } else {
                        window.location.href = '/login'
                    }
                },
                error: function (err) {
                    window.location.href = '/login'
                }
        })
</script>
</body>

</html>